<template>
  <div>

    <div class="body" style="z-index:1">
      <div class="stars" ref="starsRef">
        <div class="star" v-for="(item, index) in starsCount" :key="index"></div>
        <div style="z-index: 10;font-size: 50px;color: #a0cfff">
          <span>欢迎登录后台管理系统=>{{ adminName }}</span>
        </div>
      </div>
      <div style="z-index: 10;font-size: 50px;color: #a0cfff;margin-top: 200px;margin-left: 200px">
        <span>欢迎登录后台管理系统=>{{ adminName }}</span>
      </div>
    </div>

  </div>

</template>

<script>
import cookie from "js-cookie";

export default {
  name: "main",
  data() {
    return {
      adminName: '',
      num: 5,
      starsCount: 1000, //星星数量
      distance: 900, //间距
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.adminName = cookie.get('adminName')
  },
  mounted() {
    console.log(this.$refs.starsRef.children);
    let starNodes = Array.from(this.$refs.starsRef.children);
    starNodes.forEach((item) => {
      let speed = 0.2 + Math.random() * 1;
      let thisDistance = this.distance + Math.random() * 300;
      item.style.transformOrigin = `0 0 ${thisDistance}px`;
      item.style.transform =
          `translate3d(0,0,-${thisDistance}px)
		        rotateY(${Math.random() * 360}deg)
		        rotateX(${Math.random() * -50}deg)
		        scale(${speed},${speed})`;
    });
  }

}
</script>

<style scoped>
.body {
  position: absolute;
  width: 86%;
  height: 90%;
  margin: 0;
  padding: 0;
  background: radial-gradient(200% 100% at bottom center,
  #f7f7b6,
  #e96f92,
  #1b2947);
  background: radial-gradient(200% 105% at top center,
  #1b2947 10%,
  #75517d 40%,
  #e96f92 65%,
  #f7f7b6);
  background-attachment: fixed;
  overflow: hidden;
}

@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }

  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 45%;
  animation: rotate 90s infinite linear;
  bottom: 0;
}

.star {
  width: 2px;
  height: 2px;
  background: #f7f7b6;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
}
</style>
